Step 1: COLOR!
Color can be specified for web pages by using RGB values, hexdecimal values, HSB values, and color names. In this unit we discussed the case for using HSL as an excellent tool for modifying the lightness/darkness and saturation of a given hue.
Opacity (AKA transparency) can be applied to anything with color. This includes text color, background color, and images.
Use this page and CSS styesheet to practice with color and opacity values. Use the various resources to change the colors in the text and background of the elements on this page.
- Apply a border, box-shadow and rounded corners to the container.
- Create a gradient in the background of the container.
- Use the leaf.jpg image to create a repeatable background in the body.
- Use the CSS opacity property to change the opacity of the image.
- Create a customized button (button below) that includes a gradient, box-shadow, and border.
- Apply text and color styling to the footer area.
- "I Love Color!" - Create a link to your favorite color picker - style the link.
Step 2: FONTS!
- Apply the font-family property to the body text using web-safe font and font fall-back
- Apply font readability principles as discussed in the module.
- Apply a custom font to the headings
